<template>
  <div class="login-bg">
    <!-- Logo放置 -->
    <div class="logo box">
      <img />
    </div>
    <!-- 后台管理系统名字 -->
    <div class="title box">智慧物业管理系统</div>
    <!-- 登入账号密码卡片 -->
    <div class="center-card box">
      <!-- 账号密码等输入框 -->
      <div class="input-box">
        <div class="input-item" v-for="item in state.inputInfo" :key="item.id">
          <InputVue @value="getValue" :Info="item"></InputVue>
          <div v-if="item.name == 'username'" class="warn">{{ computedUserName }}</div>
        </div>
      </div>
      <!-- 记住密码，忘记密码选项 -->
      <div class="login-select">
        <!-- 记住密码 -->
        <div class="remember" @click="rememberPassword">
          <div class="pitch">
            <i v-if="state.remember === true" class="iconfont icon-gougou" style="color: white; font-size: 10px"></i>
          </div>
          <div style="
                user-select: none;
                color: rgb(174, 174, 174);
                user-select: none;
              ">
            记住密码
          </div>
        </div>
        <!-- 忘记密码 -->
        <div class="forget" @click="forgetPassword">忘记密码</div>
      </div>
      <!-- 提交登入选项 -->
      <div class="submit" @click="submit">
        <div>登</div>
        <div>录</div>
      </div>
      <!-- 其它登入方式 -->
      <div class="other-login">
        <div class="other-login-text" style="color: #ffffff">
          其它登入方式：
        </div>
        <div class="weichat" @click="weichatLogin">
          <i class="iconfont icon-weixin" style="font-size: 26px; color: #ffffff"></i>
        </div>
        <div class="phone" @click="phoneLogin">
          <i class="iconfont icon-shouji" style="font-size: 26px; color: #ffffff"></i>
        </div>
      </div>
    </div>
    <div class="hidebox" v-if="state.phoneHiden">
      <div class="hidebox-card">
        <!-- 手机号 -->
        <div class="phoneInput">
          <div>手机号:</div>
          <el-input v-model="state.phone" style="width: 200px" placeholder="手机号" />
        </div>
        <!-- 验证码 -->
        <div class="phoneInput">
          <div>验证码:</div>
          <el-input v-model="state.phoneYz" style="width: 200px" placeholder="验证码"><template #append>
              <div @click="countDown" style="cursor: pointer">
                {{ state.yzTime }}
              </div>
            </template></el-input>
        </div>
        <!-- 登入按钮 -->
        <div class="submitPhoneLogin">
          <el-button @click="signOut">取消</el-button>
          <el-button type="primary" @click="submitPhoneLogin">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive } from "vue";
import InputVue from "./components/input.vue";
import getApi from "@/api/getApi";
import router from "@/router";
import { computed } from "@vue/reactivity";
export default {
  components: {
    InputVue,
  },
  setup() {
    const state = reactive({
      inputInfo: [
        {
          name: "username",
          icon: "icon-yonghu",
          placeholder: "账号",
          hide: false,
          insepect: false,
          id: 0,
        },
        {
          name: "password",
          icon: "icon-24gf-lock2",
          placeholder: "密码",
          hide: true,
          insepect: false,
          id: 1,
        },
        {
          name: "number",
          icon: "icon-qiye",
          placeholder: "企业名称",
          hide: false,
          insepect: false,
          id: 2,
        }
      ],
      userName: "",
      passWord: "",
      number: "",
      // insepect: '',
      // reinsepect: '',
      phoneHiden: false,
      remember: false,
      yzTime: "发送验证码",
      phone: "",
      myYz: "",
      phoneYz: "",
    });
    const computedUserName = computed(() => {
      var re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
      var result = re.test(state.userName);
      if (!result) {
        return state.userName ? '用户名格式错误' : ''
      } else {
        return state.userName ? '' : ''
      }
    })
    // 把账号密码等值存储
    const getValue = (arr) => {
      if (arr[0] === "username") {
        state.userName = arr[1];
      } else if (arr[0] === "password") {
        state.passWord = arr[1];
      } else if (arr[0] === "number") {
        state.number = arr[1];
      } else if (arr[0] === "insepect") {
        state.insepect = arr[1];
      }
    };
    //存储验证码
    // const getYz = (arr) => {
    //     state.reinsepect = arr.join('').toString()
    //     console.log(state.reinsepect)
    // }
    // 记住密码
    const rememberPassword = () => {
      state.remember = !state.remember;
    };
    // 忘记密码
    const forgetPassword = () => { };
    //登录
    const submit = () => {
      // if (state.insepect.toString().toLocaleLowerCase() !== state.reinsepect.toLocaleLowerCase()) {
      //     console.log(state.insepect.toString().toLocaleLowerCase(),state.reinsepect.toLocaleLowerCase())
      //     ElMessage.error('验证码错误！')
      // } else {
      let obj = {
        tel: state.userName,
        password: state.passWord,
        company: state.number,
      };
      // 发起登入请求
      getApi("/account/login", "post", obj).then((res) => {
        // console.log(res)
        setCookie("token", res.data.data, 1);
        if (getCookie("token") === res.data.data) {
          router.push("/home");
          ElMessage({
            message: "登录成功",
            type: "success",
          });
        } else {
          ElMessage.error("登陆失败");
        }
        //登录



        // console.log(getCookie('token'))
      });
      // }
    };
    onMounted(() => {
      console.log(getCookie("token"));
    });
    // 将token令牌存储至浏览器cookies本地缓存中
    const setCookie = (cname, cvalue, exdays) => {
      // 第一个参数是存储名，第二个参数为存储值，第三个参数为设置存在日期
      var d = new Date();
      d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
      var expires = "expires=" + d.toGMTString();
      document.cookie =
        cname + "=" + encodeURIComponent(cvalue) + "; " + expires;
    };
    // 根据存储名读取浏览器cookies中的本地缓存
    const getCookie = (cname) => {
      // 参数为存储名
      var name = cname + "=";
      var ca = document.cookie.split(";");
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0)
          return decodeURIComponent(c.substring(name.length, c.length));
      }
      return "";
    };
    // 微信登入
    const weichatLogin = () => { };
    // 打开手机验证遮罩层
    const phoneLogin = () => {
      state.phoneHiden = true;
    };
    // 手机号登录
    const submitPhoneLogin = () => {
      if (state.phoneYz == state.myYz) {
        getApi("/account/loginBySms", "post", { tel: state.phone }).then(
          (res) => {
            setCookie("token", res.data.data, 1);
            console.log(res.data.data, 555);
            if (getCookie("token") === res.data.data) {
              router.push("/home");
              ElMessage({
                message: "登录成功",
                type: "success",
              });
            } else {
              ElMessage.error("登陆失败");
            }
          }
        );
      } else {
        ElMessage.error("验证码错误");
      }
    };
    // 退出手机遮罩层
    const signOut = () => {
      state.phoneHiden = false;
    };
    // 手机验证码倒计时
    const countDown = () => {
      if (state.yzTime === "发送验证码") {
        getApi("/account/sendCode", "post", { tel: state.phone }).then(
          (res) => {
            state.myYz = res.data.data;
          }
        );
        state.yzTime = 120;
        const dingshi = setInterval(() => {
          // console.log(state.yzTime)
          state.yzTime = state.yzTime - 1;
          if (state.yzTime === 0) {
            state.yzTime = "发送验证码";
            clearInterval(dingshi);
          }
        }, 1000);
      }
    };

    return {
      state,
      getValue,
      rememberPassword,
      forgetPassword,
      submit,
      weichatLogin,
      submitPhoneLogin,
      countDown,
      phoneLogin,
      signOut,
      computedUserName
    };
  },
};
</script>

<style lang="less" scoped>
.login-bg {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(40deg, #333, #333 50%, #eee 75%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .box {
    margin-bottom: 16px;
  }

  .title {
    font-size: 32px;
    font-weight: 700;
    color: white;
    text-shadow: 2px 3px 1px rgb(163, 164, 164);
  }

  .center-card {
    width: 500px;
    height: 440px;
    background: rgba(64, 60, 71, 0.505);
    border-radius: 10px;
    box-shadow: 0px 0px 5px 2px #4f4f4f;
    padding: 30px 100px 10px 100px;
    box-sizing: border-box;

    .input-box {
      margin-bottom: 30px;

      .input-item {
        margin-bottom: 30px;
        position: relative;

        .warn {
          color: red;
          font-size: 12px;
          position: absolute;
          z-index: 100;
          bottom: -20px;
          left: 0;
        }
      }
    }

    .login-select {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;

      .remember {
        display: flex;
        align-items: center;
        cursor: pointer;

        .pitch {
          width: 14px;
          height: 14px;
          border-radius: 4px;
          border: 2px solid rgb(174, 174, 174);
          margin-right: 4px;
          margin-top: 2px;
          display: flex;
          align-items: center;
        }
      }

      .forget {
        color: rgb(104, 142, 238);
        cursor: pointer;
      }
    }

    .submit {
      width: 100%;
      height: 36px;
      background: rgb(81, 77, 77);
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      font-size: 18px;
      font-weight: 500;
      color: white;
      cursor: pointer;
    }

    .other-login {
      margin-top: 30px;
      display: flex;
      align-items: center;

      .weichat {
        border-radius: 50%;
        background-color: rgb(40, 196, 69);
        padding: 4px 4px 4px 4px;
        box-sizing: border-box;
        cursor: pointer;
        margin-left: 8px;
      }

      .phone {
        margin-left: 10px;
        border-radius: 50%;
        background-color: rgb(40, 84, 196);
        padding: 4px 4px 4px 4px;
        box-sizing: border-box;
        cursor: pointer;
      }
    }
  }

  .hidebox {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(78, 78, 78, 0.647);
    display: flex;
    align-items: center;
    justify-content: center;

    .hidebox-card {
      width: 400px;
      height: 200px;
      background-color: #fff;
      border-radius: 8px;
      padding: 10px 60px 10px 60px;
      box-sizing: border-box;

      .phoneInput {
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .submitPhoneLogin {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>